<template>
	<view class="container" v-if="isLoading">
		<view class="banner">
			<image src="https://family-care.oss-cn-shanghai.aliyuncs.com/static/background/bg-home.png" mode="" class="bg"></image>
		</view>
		<view class="content">
			<view class="login">
				<view class="title">
					<view>
						<image src="/static/images/index/title-icon.png" mode=""  class="icon"></image>
					</view>
					<view>跟宝宝打个招呼</view>
				</view>
				<view v-if="isLogin" @click="toLogin()" class="btn">登录/注册</view>
			</view>
			<view class="entrance">
				<view class="item" @click="goMenu()">
					<image src="/static/images/index/icon_1.png" class="icon"></image>
					<view class="title">托育服务</view>
				</view>
				<view class="item"  @click="goMenu()">
					<image src="/static/images/index/icon_2.png" class="icon"></image>
					<view class="title">托管服务</view>
				</view>
				<view class="item"  @click="goMenu()">
					<image src="/static/images/index/icon_3.png" class="icon"></image>
					<view class="title">绘本阅读</view>
				</view>
			</view>
			<view class="info">
				<view class="integral_section">
					<view class="top" @click="goTo('pages/city/citySelct')">
						<view class="value">选择园区</view> 
						<view class="right">></view>
					</view>
					<view class="bottom">
						发现你的幸运园区
					</view>
				</view>
				<view class="house">
					<image src="/static/images/index/house.png"></image>
				</view>
			</view>
			<view class="navigators">
				<view class="title">
					<text>父母课堂</text>
					<view class="tv-btn" @click="goTutorial()">
						<image class="img" src="/static/images/index/tv.png" mode=""></image>
						<text>我的学堂</text>
					</view>
				</view>
				<u-tabs  keyName="category_name"  :list="categoryList" @click="changeTabs"></u-tabs>
				<view class="lesson-title">推荐课程体验营</view>
				<scroll-view scroll-y="true" @scrolltolower="moreList" class="scroll-album">
					<view class="lesson" v-for="(album,albumIndex) in albumList" :key="albumIndex" @tap="goAlbumDetail(album.album_id)">
						<image :src="album.cover_url |defaultImg" class="img" mode="aspectFit"></image>
						<view class="lesson-right">
							<view class="title">{{album.album_title}}</view>
							<view class="display-flex">
								<view class="orange">{{album.category_name}}</view>
							</view>
							<view class="display-flex">
								<view class="red">
									领30元券
								</view>
							</view>
							<view class="display-flex justify-between">
								<view class="white">共30节课</view>
								<view class="white">6000+人正在学习</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="member-news">
				<view class="title">
					<text>有播分享</text>
					<view class="tv-btn" @click="goCourse()">
						<image class="img" src="/static/images/index/tv.png" mode=""></image>
						<text>有播学习</text>
					</view>
				</view>
				<image src="/static/images/index/deep_img.png" class="img" mode=""></image>
				<view class="box">
					<view class="display-flex justify-between">
						<view class="box-title">早课故事</view>
						<view class="box-btn">更多></view>
					</view>
				</view>
				<view>
					<u-scroll-list>
						<view class="scroll-list">
							<view
								class="scroll-list__line"
								v-for="(item, index) in menuArr"
								:key="index"
							>
								<view
									class="scroll-list__line__item"
									v-for="(item1, index1) in item"
									:key="index1"
									:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']"
								>
									<image
										class="scroll-list__line__item__image"
										:src="item1.icon"
										mode=""
									></image>
									<text class="scroll-list__line__item__text">{{ item1.name }}</text>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
		</view>
		<!-- <rwj-tabbar :current-page="0"></rwj-tabbar>  -->
	</view>
	<skeleton v-else></skeleton>
</template>

<script>
	import apis from "@/api"
	import skeleton from './components/skeleton.vue'
	export default {
		components:{
			skeleton
		},
		data() {
			return {
				isLoading:false,
				isLogin:uni.getStorageSync('isLogin'),
				menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
				menuArr: [
					[{
							name: '情绪管理',
							icon: '/static/book.png'
						},
						{
							name: '伊索寓言',
							icon: '/static/p2.png'
						}, {
							name: '安徒生童话',
							icon: '/static/p3.png'
						}, {
							name: '品格养成',
							icon: '/static/p4.png'
						}, {
							name: '彩虹宝宝',
							icon: '/static/p5.png'
						}, {
							name: '彩虹宝宝2',
							icon: '/static/p6.png'
						}
					],[{
							name: '情绪管理',
							icon: '/static/book.png'
						},
						{
							name: '伊索寓言',
							icon: '/static/p2.png'
						}, {
							name: '安徒生童话',
							icon: '/static/p3.png'
						}, {
							name: '品格养成',
							icon: '/static/p4.png'
						}, {
							name: '彩虹宝宝',
							icon: '/static/p5.png'
						}, {
							name: '彩虹宝宝2',
							icon: '/static/p6.png'
						}
					]
				],
				bookList:[{
					name:"6-12月感统运动课【即将永久下线】"
					},{
						name:'1-2岁感统运动课【已售罄】'
					}],
				  list1: [{
						name: '推荐',
					}, {
						name: '感统课',
					}, {
						name: '绘本课'
					}, {
						name: '新课首发'
					}, {
						name: '系统课'
					}],
				categoryList:[],
				albumList: [],
				categoryId: 0,
				page: 0,
				total: 0
								
					
			}
		},
		filters: {
			defaultImg(val) {
				if (!val) {
					return 'https://storage.ganorglobal.com/miniapp-service/static/course_icon.jpg'
				}
			}
		},
		async onLoad()  {
			this.isLoading = false
			await Promise.all([this.tutorialCategories(),this.getAlbumList()])
			this.isLoading = true
		},
		methods: {
			//获取父母课堂分类
			tutorialCategories() {
				const args = {}
				this.common.http.request(apis.tutorialCategories, 'post', args, res => {
					if (res.data.code == 0) {
						this.categoryList = [{
							category_id: 0,
							category_name: '全部'
						}, ...res.data.data]
					}
				})
			},
			// 获取父母课堂数据
			getAlbumList() {
				this.page++
				const args = {
					category_id: this.categoryId,
					page: this.page,
					limit: 15
				}
				uni.showToast({
					icon: 'none',
					title: '加载中请稍后'
				})
				this.common.http.request(apis.albumList, 'post', args, res => {
					uni.hideToast()
					if (res.data.code == 0) {
						this.total = res.data.data.total
						if (this.albumList.length) {
							this.albumList = [this.albumList, res.data.data.list].flat()
						} else {
							this.albumList = res.data.data.list
						}
					}
				})
			},
			// 下拉加载
			moreList() {
				if (this.total && this.albumList.length >= this.total) {
					uni.showToast({
						title: '没有更多啦',
						icon: 'none'
					})
					return
				}
				this.getAlbumList()
			},
			changeTabs(item) {
				this.page = 0
				this.albumList = []
				this.categoryId = item.category_id
				this.getAlbumList()
			},
			// 父母课堂详情
			goAlbumDetail(albumId) {
				uni.navigateTo({
					url: '../course/course?albumId=' + albumId
				})
			},
			
			goTo(url) {
				uni.switchTab({
					url: '/pages/city/citySelect'
				})
			},
			goTutorial() {
				uni.navigateTo({
					url:'/pages/knowledge/knowledge'
				})
			},
			goCourse() {
				uni.navigateTo({
					url:'/pages/tutorial/tutorial'
				})
			},
			goMenu() {
				uni.switchTab({
					url:'/pages/menu/menu'
				})
			},
			toLogin() {
				if(!this.isLogin){
					uni.navigateTo({
						url:'/pages/login/login-wx'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
/* #ifdef H5 */
page {
	height: auto;
	min-height:100%;
}
/* #endif */

.banner {
	position: relative;
	width: 100%;
	
	.bg {
		width: 100%;
		height: 1209rpx;
	}
	
	.intro {
		position: absolute;
		top: calc(50rpx + var(--status-bar-height));
		left: 40rpx;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		
		.greet {
			font-size: $font-size-lg;
			margin-bottom: 10rpx;
		}
		
		.note {
			font-size: $font-size-sm;
		}
	}
}

.content {
	padding: 0 30rpx;
}

.login {
	position: relative;
	margin-top:-40rpx;

	margin-bottom: 30rpx;
	border-radius: 23rpx;
	background-color: rgba(251, 235, 210, 1);
	box-shadow: $box-shadow;
	color: rgba(244, 156, 78, 1);
	font-size: 25rpx;
	font-weight: bold;
	height: 81rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24rpx;
	.icon {
		width: 67rpx;
		height:61rpx;
	}
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 30rpx;
		background-color: rgba(255, 142, 60, 1);
		box-shadow: 0 1 16rpx rgba(255, 202, 88, 1);
		border-radius: 26rpx;
		width: 129rpx;
		height: 52rpx;
		color: white;
		font-size: 22rpx;
		font-weight: bold;
	}
}
.entrance {
	position: relative;
	margin-top: -30rpx;
	margin-bottom: 30rpx;
	border-radius: 10rpx;
	background-color: #ffffff;
	box-shadow: $box-shadow;
	padding: 30rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		&:nth-child(1):after {
			content: '';
			position: absolute;
			width: 1rpx;
			background-color: #ddd;
			right: 0;
			height: 100%;
			transform: scaleX(0.5) scaleY(0.8);
		}
		&:nth-child(2):after {
			content: '';
			position: absolute;
			width: 1rpx;
			background-color: #ddd;
			right: 0;
			height: 100%;
			transform: scaleX(0.5) scaleY(0.8);
		}
		
		.icon {
			width: 84rpx;
			height: 84rpx;
			margin: 20rpx;
		}
		
		.title {
			font-size: 30rpx;
			color: $text-color-base;
			font-weight: 600;
		}
	}
}

.info {
	position: relative;
	margin-bottom: 30rpx;
	border-radius: 10rpx;
	background-color: #ffffff;
	box-shadow: $box-shadow;
	padding: 30rpx 47rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.integral_section {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		.top {
			display: flex;
			align-items: center;
			line-height: 28rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 20rpx ;
		}
		
		.bottom {
			font-size: 26rpx;
			color: $text-color-assist;
			display: flex;
			align-items: center;
		}
	}
	
	.house {
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 81rpx;
			height: 92rpx;
			// margin-bottom: 10rpx;
		}
	}
}

.navigators {
	width: 100%;
	margin-bottom: 40rpx;	
	border-radius: 10rpx;
	background-color: #ffffff;
	box-shadow: $box-shadow;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-content: space-around;
	.title {
		text-align: center;
		// margin: auto;
		font-size: 36rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		position: relative;
		.tv-btn {
			position: absolute;
			// float: right;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			.img {
				width: 48rpx;
				height: 53rpx;
				margin-right: 5rpx;
				margin-bottom:10rpx ;
			}
		}
	}
	.lesson-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);

	}
	.lesson {
		display: flex;
		flex: 1;
		margin-top:40rpx;
		.lesson-right {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 20rpx;
		}
		.title {
				font-size: 28rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				display: flex;
		}
		.orange {
			display: inline-block;
			color:#e39a57;
			font-size: 18rpx;
			padding: 3rpx 5rpx;
			background-color: #fcf0d6;
		}
		.red {
			display: inline-block;
			color:#e97c71 ;
			background-color: #fbeaec;
			font-size: 18rpx;
			padding: 3rpx 5rpx;
		}
		.white {
			display: flex;
			justify-content: space-between;
			color: #b2b2b2;
			font-size: 18rpx;
		}
		.img {
			width: 190rpx;
			height: 220rpx;
		}
	}
	
	
}

.member-news {
	width: 100%;
	margin-bottom: 20rpx;	
	border-radius: 10rpx;
	background-color: #ffffff;
	box-shadow: $box-shadow;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	.title {
		text-align: center;
		// margin: auto;
		font-size: 36rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		position: relative;
		.tv-btn {
			position: absolute;
			// float: right;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			.img {
				width: 48rpx;
				height: 53rpx;
				margin-right: 5rpx;
				margin-bottom:10rpx ;
			}
		}
	}
	.img {
		width: 100%;
		height: 250rpx;
		
	}
	.box {
		margin: 20rpx 0;
		.box-title {
			font-size: 36rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			
		}
		.box-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f8a346;
			color: white;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 28rpx;
			border-radius: 22rpx;
			padding: 0 20rpx;
		}
	}
	
	
}
.scroll-album {
	height: 400px;
}
.scroll-list {
	@include flex(column);

	&__goods-item {
		margin-right: 20px;

		&__image {
			width: 60px;
			height: 60px;
			border-radius: 4px;
		}

		&__text {
			color: #f56c6c;
			text-align: center;
			font-size: 12px;
			margin-top: 5px;
		}
	}

	&__show-more {
		background-color: #fff0f0;
		border-radius: 3px;
		padding: 3px 6px;
		@include flex(column);
		align-items: center;

		&__text {
			font-size: 12px;
			width: 12px;
			color: #f56c6c;
			line-height: 16px;
		}
	}

	&__line {
		@include flex;
		margin-top: 10px;

		&__item {
			margin-right: 15px;

			&__image {
				width: 68px;
				height: 61px;
			}

			&__text {
				margin-top: 5px;
				color: $u-content-color;
				font-size: 12px;
				text-align: center;
			}

			&--no-margin-right {
				margin-right: 0;
			}
		}
	}
}
</style>
